<template>
  <el-table-column fixed="right" :label="label" :width="Number(width)">
    <template slot-scope="{row}">
      <div @click.stop v-for="(bar, idx) in buttons" :key="idx" style="display: inline-block; padding: 0 4px">
        <!-- 按钮 -->
        <el-button
            v-if="bar.type === 'btn'" v-show="!bar.hidden"
            :icon="bar.icon" :title="bar.title" :class="bar.style"
            type="text" size="small"
            @click="onAction(bar.evt, row)">
          {{ bar.label }}
        </el-button>

        <!-- 分割线 -->
        <el-divider v-if="bar.type === 'divider'" direction="vertical"></el-divider>
      </div>
    </template>
  </el-table-column>
</template>

<script>
/**
 *
 * 操作栏封装
 *
 * 就是一个特殊的列
 */
/* eslint-disable */
export default {
    name: "SeaTableActionbar",
    props: {
        label: {type: String, default: '操作栏'}
        // 宽度
        , width: {type: [String, Number], default: 180}
        // 操作栏，默认启用
        , buttons: {type: Array, default: undefined}
        // 行内点击事件以及操作栏事件，大部分事件都是通过这个函数进行传递的
        , onAction: {type: Function}
    }
}
</script>
